<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" type="text/css" href="../static/plugin/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="../static/css/dj-css.css">
    <style type="text/css">
        .layui-form{margin:0 20px;}
        .x-red{color:red;}
        .layui-form-item{line-height: 38px;}
    </style>
</head>
<body>
<div id="createApp">
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>菜单</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline" >
                <input type="text" name="menuName" v-model="parameter.menuName" placeholder="请输入菜单名称" autocomplete="off" class="layui-input" @blur="verify(parameter.menuName)">
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单编号</label>
            <div class="layui-input-inline">
                <input type="text" name="menuValue" v-model="parameter.menuValue" lay-verify="required" placeholder="请输入菜单编号" autocomplete="off" class="layui-input" @blur="verify(parameter.menuValue)">
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">页面路径</label>
            <div class="layui-input-inline">
                <input type="text" name="pageUrl" v-model="parameter.pageUrl" lay-verify="required" placeholder="请输入页面路径" autocomplete="off" class="layui-input" @blur="verify(parameter.pageUrl)">
            </div>
            <span class="x-red">*必填</span>
        </div>
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">所处级别</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<input type="text" name="pageUrl" v-model="parameter.level" lay-verify="required" placeholder="请输入新建菜单级别" autocomplete="off" class="layui-input" @blur="verify(parameter.level)">-->
            <!--</div>-->
            <!--<span class="x-red">*必填</span>-->
        <!--</div>-->
        <div class="layui-form-item">
            <div class="dj-select dj-select-inline boxStyle">
                <label   style="height:auto;padding:3px 15px;width:110px;">所处级别</label>
                <div class="dj-select-content" style="width: 196px;">
                    <div class="dj-select-input" flag = 'true' style="width: 190px;">
                        <span class="dj-selected readOnly" type="text" name=""  selectedCode='1' style="height:40px;line-height:40px;width: 190px;" id="levelId">请输入新建菜单级别</span>
                        <i></i>
                    </div>
                    <ul class="dj-select-list" style="width: 190px;">
                        <li code="1">1</li>
                        <li code="2">2</li>
                        <li code="3">3</li>
                    </ul>
                </div>
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item">
            <div class="dj-select dj-select-inline boxStyle">
                <label   style="height:auto;padding:3px 15px;width:110px;">子菜单</label>
                <div class="dj-select-content" style="width: 196px;">
                    <div class="dj-select-input" flag = 'true' style="width: 190px;">
                        <span class="dj-selected readOnly" type="text" name=""  selectedCode='' style="height:40px;line-height:40px;width: 190px;" id="isLeaf">请选择有无子菜单</span>
                        <i></i>
                    </div>
                    <ul class="dj-select-list" style="width: 190px;">
                        <li code="0">无子菜单</li>
                        <li code="1">有子菜单</li>
                    </ul>
                </div>
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item">
            <div class="dj-select dj-select-inline boxStyle">
                <label   style="height:auto;padding:3px 15px;width:110px;">上级菜单</label>
                <div class="dj-select-content" style="width: 196px;">
                    <div class="dj-select-input" flag = 'true' style="width: 190px;">
                        <span @click="getMenuList" class="dj-selected readOnly" type="text" name=""  selectedCode='' style="height:40px;line-height:40px;width: 190px;" id="parentAuthId">请选择菜单层级</span>
                        <i></i>
                    </div>
                    <ul class="dj-select-list" style="width: 190px;">
                        <li v-for="item in menuList" :class="{'selected':(parameter.parentAuthId == item.pkMenuId) ? true : false }"  :code="item.pkMenuId">{{item.menuName}}</li>
                    </ul>
                </div>
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="elementIndex" v-model="parameter.elementIndex" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" @blur="verifyNum(parameter.elementIndex)">
            </div>
        </div>
    </form>
    <div class="layui-form-item">
        <label class="layui-form-label"></label><button class="layui-btn" lay-submit="" lay-filter="demo2" @click="sub">提交</button>
    </div>
</div>
<script src="../static/lib/jquery.min.js"></script>
<script src="../static/lib/layui/layui.js" charset="utf-8"></script>
<script src="../static/lib/vue.min.js"></script>
<script src="../static/lib/x-layui.js"></script>
<script src="../static/lib/dj-js.js"></script>
<script type="text/javascript">

    var myid="${department.id}"
    if(myid==""){
        var kid=""
    }else {
        kid="$!{menu.pkMenuId}"
    }
    $("#parentAuthId").html('$!{menu.parentAuthId}');
    var VM = new Vue({
        el:"#createApp",
        created:function(){
            this.lay();
        },
        data:{
            menuList:[],
            parameter:{
                menuName:'$!{menu.menuName}',
                menuDesc:'$!{menu.menuDesc}',
                menuValue:'$!{menu.menuValue}',
                level:'$!{menu.level}',
                parentAuthId:'$!{menu.parentAuthId}',
                pageUrl:'$!{menu.pageUrl}',
                elementIndex:'$!{menu.elementIndex}',
                createTime:'$!{menu.createTime}',
                updateTime:'$!{menu.updateTime}',
                updateUser:"$!{menu.updateUser}",
                createUser:"$!{menu.createUser}",
                pageElement:'$!{menu.pageElement}',/*$!{department.parentDeptId}*/
                pkMenuId:kid,
                isLeaf:""

            }
        },
        methods:{
            lay:function(){
                layui.use(['layer',"form",'laydate'], function(){
                    var form = layui.form(),
                            layer = layui.layer,
                            laydate = layui.laydate;
                    form.on('checkbox(allChoose)', function(data){
                        var child = $(data.elem).parents('table').find('tbody input.checkbox');
                        child.each(function(index, item){
                            item.checked = data.elem.checked;
                        });
                        form.render('checkbox');
                    });
                });
            },
            verify:function (item) {
                if(item == ""){
                    layer.msg("必填项不能为空！", {icon: 1});
                    return false;
                }
            },
            verifyNum:function (item) {
                var _this = this;
                if(item == ""){
                    layer.msg("必填项不能为空！", {icon: 1});
                    return false;
                }else if(isNaN(item)){
                    layer.msg("排序必须为数字！", {icon: 1});
                    _this.parameter.elementIndex = "";
                    return false;
                }
            },
            sub:function () {
                var _this = this;
                _this.parameter.parentAuthId=$("#parentAuthId").attr("selectedCode");//下拉菜单取值
                _this.parameter.isLeaf=$("#isLeaf").attr("selectedCode");//下拉菜单取值

                if(this.parameter.menuName == "" ){
                    layer.msg("请输入菜单名称！", {icon: 1});
                    return false;
                }else if(this.parameter.menuValue == ""){
                    layer.msg("请输入菜单编号！", {icon: 1});
                    return false;
                }
                else if(this.parameter.pageUrl == ""){
                    layer.msg("请输入页面路径！", {icon: 1});
                    return false;
                }
                else if(_this.parameter.parentAuthId == ""){
                    layer.msg("请选择层级！", {icon: 1});
                    return false;
                }
                else if(this.parameter.elementIndex == ""){
                    layer.msg("请输入排序！", {icon: 1});
                    return false;
                }

                _this.parameter.level = $("#levelId").attr("selectedCode");

                console.log(_this.parameter);

                $.ajax({
                    type: "post",
                    url: "../menu/saveOrUpdate.do",
                    data: _this.parameter,
                    dataType: "json",
                    success: function(data){
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        parent.window.location.reload();
                        window.location.href = "javascript:location.replace(location.href)";
                    }
                });
            },
            getMenuList:function(){
                if($("#parentAuthId").hasClass("clicked")){
                   return;
                }
                var _this=this;
                var level = parseInt($("#levelId").attr("selectedCode"));
                level -=1;

                console.log(level);

                $.ajax({
                    type: "post",
                    url: "../menu/getLevel1MenuList.do?level="+level,
                    dataType: "json",
                    success: function(data){
                        _this.menuList=data.result.list
                        console.log(data);
                        console.log(_this.menuList);
                        _this.menuList.forEach(function (item,value) {
                            if(_this.parameter.parentAuthId == item.pkMenuId){
                                $("#parentAuthId").html(item.menuName);
                                $("#parentAuthId").attr("selectedCode",item.pkMenuId);
                            }
                        });
                    }
                });
            }
        }
    });//vue 实例结束

</script>
</body>
</html>